<template>
	<div>
		<HeaderNav />
		<div class="nav-list-details">
			<!--收藏点赞点击弹框-->
		    <CompIcon :iconStyle="iconStyle" v-if="compIconShow" :compIconContent="compIconContent"/> 
			<div class="list-details-top">
				<h5>当前领域名称><em>主题名称</em></h5>
				<div>
					<input type="text" v-model="inputValue" @focus="searchFocus" @blur="searchBlur"/>
					<p v-if="placeholderShow">请输入关键字</p>
					<span @click='goSearch(0)' v-if="isSearch">搜索</span>
					<span @click='goSearch(1)' v-else>取消搜索</span>
				</div>
			</div>
			<div class="list-detail-content">
				<div class="list-details-bottom" v-for="(item, index) in listContent" :key="index" v-if="index < listNum">
					<NavListDetComp :detailContent="item" @popContent="popContent"/>
				</div>
			</div>
			<div class="list-more">
				<h3 @click="listMore">点击加载更多<i></i></h3>
			</div>
		</div>
	</div>
</template>

<script>
  import HeaderNav from '@/components/header'
  import NavListDetComp from '@/components/navDetails/navListDetComp'
  // 子路由中点赞和收藏组件
  import CompIcon from '@/components/public/compIcon'
	export default {
		components: {
			HeaderNav,
			NavListDetComp,
			CompIcon
		},
		data () {
			return {
				inputValue: '', // input值
				placeholderShow: true, // input提示是否显示
				listNum: 20, // 加载的条数
				listContent: [], // 每条的内容
				isSearch: true, // 搜索框状态
				iconStyle: { // 收藏点赞点击弹框位置
					'marginTop':'200px',
					'marginLeft': '430px'
				},
				compIconContent: '', // CompIcon的内容
				compIconShow: false // compIcon是否显示
			}
		},
		methods: {
			// input获取焦点
			searchFocus () {
				var that = this
				that.placeholderShow = false
			},
			// input失去焦点
			searchBlur () {
				var that = this
				if (that.inputValue) {
					that.placeholderShow = false
				} else {
					that.placeholderShow = true
				}
			},
			// 加载更多
			listMore () {
				this.listNum += 20
			},
			// 搜索
			goSearch (index) {
				var that = this
				if (index === 0) {
					if (that.inputValue) {
						that.isSearch = false
					} else {
						that.isSearch = true
					}
				} else if (index === 1) {
					that.isSearch = true
					that.inputValue = ''
					that.placeholderShow = true
				}
			},
			// 从contribution子组件传来的参数，用来处理
	  		popContent (value) {
	  			var that = this
	  			that.compIconContent = value
	  			that.compIconShow = true
	  			setTimeout (function () {
	  				that.compIconShow = false
	  			},3000)
	  		}
		},
		created () {
			this.$http.get('../../../../static/json/navListDetail.json')
			.then(res => {
				var data = res.data.data
				this.listContent = data
			})
			.catch(error => {
				console.log(error)
			})
		}
	}
</script>

<style scoped>
  @import url('../../../static/navDetails/navListDetails.css');
</style>